<template>
  <el-container style="padding: 15px">
    <el-header height="120px">
      <el-form size="small" label-width="70px">
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="6">
            <el-form-item label="报告文号">
              <el-input v-model="searchObj.reportId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报告名称">
              <el-input v-model="searchObj.reportName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报告类型">
              <el-select v-model="searchObj.reportType" style="width: 100%" clearable filterable>
                <el-option v-for="item in propertyType" :key="item.id" :value="item.id" :label="item.reportType" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目类型">
              <el-select v-model="searchObj.projectType" style="width: 100%" clearable filterable>
                <el-option v-for="item in propertyProjectType" :key="item.id" :value="item.id" :label="item.projectTypeName" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="middle" :gutter="20">
          <el-col :span="6">
            <el-form-item label="审核阶段">
              <el-select v-model="searchObj.leafId" style="width: 100%" clearable filterable>
                <el-option v-for="item in leaf" :key="item.id" :value="item.id" :label="item.leafName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务人员">
              <el-select v-model="searchObj.salesman" style="width: 100%" clearable filterable>
                <el-option v-for="item in users" :key="item.id" :value="item.id" :label="item.nickName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="发稿日期">
              <el-date-picker
                v-model="searchObj.startTime"
                value-format="timestamp"
                type="date"
                placeholder="开始时间"
                @change="startTimeChangeHandler"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label=" ">
              <el-date-picker
                v-model="searchObj.endTime"
                value-format="timestamp"
                type="date"
                placeholder="结束时间"
                @change="EndTimeChangeHandler"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="center" justify="center">
          <el-col :span="4">
            <el-button type="primary" size="small" @click="getPropertyList">搜索</el-button>
            <el-button size="small" @click="clearSearch">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-divider />
    <el-main>
      <el-form size="small">
        <el-row type="flex">
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" :loading="downloadingButtonLoding" @click="download">下载</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="propertyList">
        <el-table-column label="报告类型" prop="reportType" width="200px" />
        <el-table-column label="业务来源" prop="clientBusiness" width="200px" />
        <el-table-column label="客户名称" prop="clientChannel" width="200px" />
        <el-table-column label="子级名称" prop="clientBranch" width="200px" />
        <el-table-column label="评估报告日" prop="valuationDate" width="200px" :formatter="tableTimeFormat" />
        <el-table-column label="评估报告文号" prop="reportId" width="200px" />
        <el-table-column label="委托方名称" prop="clientName" width="200px" />
        <el-table-column label="评估报告名称" prop="reportName" width="200px" />
        <el-table-column label="签字估价师1" prop="signatureValuer1" width="200px" />
        <el-table-column label="签字估价师2" prop="signatureValuer2" width="200px" />
        <el-table-column label="出报告日期" prop="provideDate" width="200px" :formatter="tableTimeFormat" />
        <el-table-column label="发稿日期" prop="distributeNewsDispatchesDate" width="200px" :formatter="tableTimeFormat" />
        <el-table-column label="是否报备" prop="putOnRecords" width="200px" />
        <el-table-column label="报告出具份数" prop="stampNumber" width="200px" />
        <el-table-column label="合同号" prop="contract" width="200px" />
        <el-table-column label="客户联系人" prop="clientContact" width="200px" />
        <el-table-column label="联系人电话" prop="clientPhone" width="200px" />
        <el-table-column label="被评估单位名称" prop="clientUnitName" width="200px" />
        <el-table-column label="被评估单位出资类型" prop="clientContributiveType" width="200px" />
        <el-table-column label="被评估单位经济性质" prop="clientEconomicNature" width="200px" />
        <el-table-column label="被评估单位行业类型" prop="clientIndustryType" width="200px" />
        <el-table-column label="被评估单位统一信用代码" prop="clientCreditCode" width="200px" />
        <el-table-column label="被评估单位注册资本" prop="clientRegisteredCapital" width="200px" />
        <el-table-column label="项目客户类型" prop="clientType" width="200px" />
        <el-table-column label="标准收费" prop="standardValue" width="200px" />
        <el-table-column label="协议金额" prop="agreementMoney" width="200px" />
        <el-table-column label="合同收费" prop="financeContractCharge" width="200px" />
        <el-table-column label="开票日期" prop="financeBillDate" width="200px" :formatter="tableTimeFormat" />
        <el-table-column label="开票金额" prop="financeBillCharge" width="200px" />
        <el-table-column label="到账日期" prop="financePayDate" width="200px" :formatter="tableTimeFormat" />
        <el-table-column label="到账金额" prop="financeArrivalAmount" width="200px" />
        <el-table-column label="评估基准日" prop="clientStandardDate" width="200px" :formatter="tableTimeFormat" />
        <el-table-column label="价值类型" prop="valueType" width="200px" />
        <el-table-column label="评估目的" prop="purpose" width="200px" />
        <el-table-column label="评估对象" prop="evaluationObject" width="200px" />
        <el-table-column label="评估范围" prop="scope" width="200px" />
        <el-table-column label="评估方法" prop="assessmentMethod" width="200px" />
        <el-table-column label="评估价值" prop="assessValue" width="200px" />
        <el-table-column label="业务员" prop="salesman" width="200px" />
        <el-table-column label="项目类型" prop="projectType" width="200px" />
        <el-table-column label="技术员" prop="technician" width="200px" />
        <el-table-column label="审核状态" prop="leafName" width="200px" />
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 40, 80]"
        :page-size="sizePage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-main>
  </el-container>
</template>

<script>
import { searchStatisticsProperty, getSearchFormList, downloadFinance } from '@/api/property-report'
import { ellipsisString, parseTime } from '@/utils'
import { validObj } from '@/utils/validate'

export default {
  name: 'Index',
  data() {
    return {
      searchObj: {},
      propertyType: [],
      propertyProjectType: [],
      leaf: [],
      users: [],
      propertyList: [],
      currentPage: 1,
      sizePage: 10,
      totalPage: 0,
      downloadingButtonLoding: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getPropertyList()
      this.getSearchForm()
    },

    getPropertyList() {
      const currentPage = this.currentPage
      const sizePage = this.sizePage
      const searchObj = this.searchObj
      searchStatisticsProperty(searchObj, currentPage, sizePage).then(res => {
        this.propertyList = res.data.list
        this.totalPage = res.data.total
      })
    },
    clearSearch() {
      this.searchObj = {}
      this.getPropertyList()
      // 重置成功提示框
      this.$message({
        message: '重置成功',
        type: 'success'
      })
    },
    download() {
      const searchObj = this.searchObj
      if (validObj(searchObj)) {
        this.downloadingButtonLoding = true
        downloadFinance(searchObj).then(res => {
          const url = window.URL.createObjectURL(new Blob([res]))
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', '资产统计表单.xlsx')
          document.body.appendChild(link)
          link.click()
          this.downloadingButtonLoding = false
        }).finally(() => {
          this.downloadingButtonLoding = false
        })
      } else {
        this.$message.warning('搜索信息不能为空')
      }
    },
    subName(row, column, cellValue, index) {
      return ellipsisString(cellValue)
    },
    getSearchForm() {
      getSearchFormList().then(res => {
        this.propertyType = res.data.propertyType
        this.propertyProjectType = res.data.propertyProjectType
        this.leaf = res.data.leaf
        this.users = res.data.users
      })
    },
    handleSizeChange(val) {
      this.sizePage = val
      this.getPropertyList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getPropertyList()
    },
    tableTimeFormat(row, column, cellValue, index) {
      return parseTime(cellValue, '')
    }
  }
}
</script>

<style scoped>

</style>
